<template>
  <div class="border border-style-solid border-gray-100 shadow-lg">
    <div class="header m-2 text-lg">{{ fileTitle }}</div>
    <div class="content ">
      <div class="accordion">
        <div class="accordion-header">
          <el-form class="p-2" :model="form" label-width="auto" style="max-width: 300px">
            <el-form-item label="设备名称">
              <el-input v-model="form.deviceName" />
            </el-form-item>
            <el-form-item label="施工用具">
              <el-input v-model="form.tools" />
            </el-form-item>
            <el-form-item label="所需材料">
              <el-input v-model="form.materials" />
            </el-form-item>
            <el-form-item label="所需人力">
              <el-input v-model="form.requiredManpower" />
            </el-form-item>
            <el-form-item label="危险源">
              <el-input v-model="form.hazard" />
            </el-form-item>
            <el-form-item label="环境因素">
              <el-input v-model="form.environmentFactor" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
defineProps({
  fileTitle:String
})
const form = {
  deviceName:'',
  tools:'',
  materials:'',
  requiredManpower:'',
  hazard:'',
  environmentFactor:'',
}
</script>

<style lang="less" scoped>
@import url("@/styles/index.less");

.border {
  flex: 1;
  margin: 4px;
  min-height: 120px;
  display: flex;
  flex-direction: column;

  .header {
    height: 30px;
    font-size: 1.2rem;
    position: relative;
    padding-left: 10px;

    &::before {
      content: "";
      display: block;
      width: 4px;
      height: 4px;
      background-color: @primary-color;
      position: absolute;
      left: 0;
      top: 14px;
      border-radius: 50%;
    }
  }

  .content {
    height: 100%;
  }
}
</style>
